<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box {
            /* height: 200px; */
            /* 100%是相对值,相对于父亲 */
            /* 在css3当中用一个新单位,vh和vw */
            /* 1vh为1/100屏幕高度,相对于屏幕 */
            height: 100vh;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <!-- #box>p*30{第$行代码} -->
    <div id="box">
        <p>第1行代码</p>
        <p>第2行代码</p>
        <p>第3行代码</p>
        <p>第4行代码</p>
        <p>第5行代码</p>
        <p>第6行代码</p>
        <p>第7行代码</p>
        <p>第8行代码</p>
        <p>第9行代码</p>
        <p>第10行代码</p>
        <p>第11行代码</p>
        <p>第12行代码</p>
        <p>第13行代码</p>
        <p>第14行代码</p>
        <p>第15行代码</p>
        <p>第16行代码</p>
        <p>第17行代码</p>
        <p>第18行代码</p>
        <p>第19行代码</p>
        <p>第20行代码</p>
        <p>第21行代码</p>
        <p>第22行代码</p>
        <p>第23行代码</p>
        <p>第24行代码</p>
        <p>第25行代码</p>
        <p>第26行代码</p>
        <p>第27行代码</p>
        <p>第28行代码</p>
        <p>第29行代码</p>
        <p>第30行代码</p>
        <p>第31行代码</p>
        <p>第32行代码</p>
        <p>第33行代码</p>
        <p>第34行代码</p>
        <p>第35行代码</p>
        <p>第36行代码</p>
        <p>第37行代码</p>
        <p>第38行代码</p>
        <p>第39行代码</p>
        <p>第40行代码</p>
        <p>第41行代码</p>
        <p>第42行代码</p>
        <p>第43行代码</p>
        <p>第44行代码</p>
        <p>第45行代码</p>
        <p>第46行代码</p>
        <p>第47行代码</p>
        <p>第48行代码</p>
        <p>第49行代码</p>
        <p>第50行代码</p>
    </div> 
</body>
<script>
//滚动条在哪个元素上面-默认在body
//如果要让滚动条在box上面
//(1)限定高度
//(2)overflow-y: auto;
document.getElementById('box').onscroll = function(){
    console.log('box滚动')
}
document.body.onscroll = function(){
    console.log('body滚动')
}    
</script>
</html>